<template>
  <span class="orderStatus">
    <a-tag :color="color" v-if="split">
      <DescriptionsSplit :text="$getEnum(dict, data.orderStatus)" />
    </a-tag>
    <a-tag :color="color" v-else>{{ $getEnum(dict, data.orderStatus) }}</a-tag>
  </span>
</template>

<script>
import orderDict from "@/dict/order";
import quotationDict from "@/dict/quotation";

const DescriptionsSplit = {
  template: `
    <div>
      <div>{{desc[0]}}</div>
    </div>
  `,
  props: {
    text: {
      type: String
    }
  },
  computed: {
    desc() {
      return this.text.split("-");
    }
  }
};

export default {
  props: {
    data: {
      type: Object
    },
    // 订单状态是否拆分做换行显示
    split: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DescriptionsSplit: DescriptionsSplit
  },
  computed: {
    // 颜色
    color() {
      let res;
      let colors = {
        blue: [
          orderDict.pricingStatus.yet.value,
          orderDict.pricingStatus.createdContract.value
        ],
        orange: [
          orderDict.pricingStatus.wait.value,
          orderDict.pricingStatus.waitContract.value
        ],
        red: [
          orderDict.pricingStatus.applyModifyPrice.value,
          orderDict.pricingStatus.revoke.value,
          orderDict.pricingStatus.sellerClose.value,
          orderDict.pricingStatus.buyerClose.value,
          orderDict.pricingStatus.buyerTally.value,
          orderDict.pricingStatus.modifyGoods.value,
          orderDict.pricingStatus.modifyPremium.value,
          orderDict.pricingStatus.sellerModifyBasePrice.value,
          orderDict.pricingStatus.sellerModifyFirmPrice.value
        ]
      };
      // 查找当前订单状态对应的颜色
      for (const key in colors) {
        if (colors[key].indexOf(this.data.orderStatus) !== -1) {
          res = key;
        }
      }
      return res;
    },
    // 根据priceType判断要查询的词典
    dict() {
      let res =
        this.data.priceType === quotationDict.priceType.pricing.value
          ? orderDict.pricingStatus
          : orderDict.confirmStatus;
      return res;
    }
  }
};
</script>

<style lang="scss" scoped>
.orderStatus {
  .ant-tag {
    font-size: 14px !important;
    line-height: 24px !important;
  }
}
</style>
